<template>
    <el-dialog v-model="dialogFormVisible" :title="flag ? '新增' : '修改'">
        <el-form :model="form" label-width="auto" :inline="true" label-position="top" :rules="rules" ref="ruleFormRef">
            <el-form-item label="配置名称" prop="confNm">
                <el-input clearable v-model="form.confNm" placeholder="请输入配置名称" style="width: 200px" />
            </el-form-item>
            <el-form-item label="表名" prop="tableNm">
                <el-select v-model="form.tableNm" clearable filterable remote reserve-keyword placeholder="请输入表名"
                    remote-show-suffix :remote-method="getTableNms" :loading="loading" style="width: 200px">
                    <el-option v-for="item in tableNmOptions" :key="item.tableName" :label="item.tableName"
                        :value="item.tableName" />
                </el-select>
            </el-form-item>
            <el-form-item label="唯一字段" prop="onlyField">
                <el-input clearable v-model="form.onlyField" placeholder="请输入唯一字段" style="width: 200px" />
            </el-form-item>
            <el-form-item label="频率" prop="frequency">
                <el-select clearable v-model="form.frequency" placeholder="请选择频率" style="width: 200px">
                    <el-option label="每日" value="0" />
                    <el-option label="每周" value="1" />
                    <el-option label="每月" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="同步字段" prop="syncField" style="width: 100%;">
                <el-input type="textarea" v-model="form.syncField" placeholder="请输入同步字段" />
            </el-form-item>
            <el-form-item label="数据条件" prop="whereCondition" style="width: 100%;">
                <el-input type="textarea" v-model="form.whereCondition" placeholder="请输入条件" />
            </el-form-item>
            <el-form-item label="开启状态" style="width: 100%;">
                <el-switch v-model="form.status" :active-value="'0'" :inactive-value="'1'" inline-prompt
                    active-text="开启" inactive-text="关闭" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">返回</el-button>
                <el-button type="primary" @click="addOrEdit">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup name="addOrEdit">
import { ref } from "vue";
import api from "@/api"
import { ElMessage } from 'element-plus'

const loading = ref(false)
const ruleFormRef = ref()
const flag = ref(false)
const dialogFormVisible = ref(false)
const form = ref()
const tableNmOptions = ref([])
const rules = ref({
    confNm: [
        { required: true, message: '请输入配置名称', trigger: 'blur' },
    ],
    tableNm: [
        { required: true, message: '请选择表名', trigger: 'blur' },
    ],
    syncField: [
        { required: true, message: '请输入同步字段', trigger: 'blur' },
    ],
    confNm: [
        { required: true, message: '请输入配置名称', trigger: 'blur' },
    ],
    whereCondition: [
        { required: true, message: '请输入条件', trigger: 'blur' },
    ],
    onlyField: [
        { required: true, message: '请输入唯一字段', trigger: 'blur' },
    ],
    frequency: [
        { required: true, message: '请选择频率', trigger: 'blur' },
    ]
})

const init = async (id) => {
    if (id) {
        flag.value = false
        const res = await api.post('/system/dataSyncConf/queryById', { id })
        if (res.data.code === 200) {
            form.value = res.data.data
        } else {
            ElMessage.error(res.data.msg)
        }
    } else {
        flag.value = true
        form.value = {}
    }
    dialogFormVisible.value = true
}

const getTableNms = async (query) => {
    const res = await api.get('/system/generate/pageList', { tableName: query })
    if (res.data.code === 200) {
        tableNmOptions.value = res.data.data.records
    } else {
        ElMessage.error(res.data.msg)
    }
}
const emit = defineEmits(['serversUpdated']);
const addOrEdit = () => {
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            let url
            if (flag.value) {
                url = '/system/dataSyncConf/add'
            } else {
                url = '/system/dataSyncConf/edit'
            }
            const res = await api.post(url, form.value)
            if (res.data.code === 200) {
                ElMessage.success(res.data.msg)
                emit('serversUpdated')
                dialogFormVisible.value = false
            } else {
                ElMessage.error(res.data.msg)
            }

        }
    })
}
defineExpose({
    init
});
</script>